<template>
	<view>
		<!-- videoBroken -->
		
		<view class="video_box" v-if="show_video_box">
			<view class="video_content" v-if="!videoBroken">
                <video
				id="myVideo" 
				:src="info.video"
                @error="videoErrorCallback"
				></video>
            </view>
			
			<view class="video_error" v-else-if="videoBroken">
				<image class="error_image" :src="info.video"></image>
				<!-- <image class="error_image" src="/static/images/error_01.png"></image> -->
				<!-- ios手机端播放部分mp4失效bug:　https://www.jianshu.com/p/31f0593496ef -->
				<!-- <text class='error_text'>出错啦! 过会儿再刷新试试?</text> -->
				<!-- <text class='error_text'>Something wrong...</text> -->
			</view>
		</view>
		
		<view v-else>
			<image class="error_image" :src="info.video"></image>
		</view>
		
		<!-- #ifdef H5 -->
		
		<!-- <a :href="info.video" target="_blank">{{info.school_name}}</a>
		<br>
		<a href="https://www.freeconvert.com/mp4-to-iphone-video" target="_blank">MP4 to iPhone Video Converter</a>
		 -->
		<!-- #endif -->
		
		<view class='title' @click="showData">联系方式</view>
		
		<view class="container">
		  <view class="picture_view">
			  <image :src='picture' class="picture_content"></image>
		  </view>
		  <view class="text">
		    <view class="school_name">
				<text @longpress='copyText(info.school_name)'>{{info.school_name}}</text>
			</view>
		    <view class="phone_numbers">
				<text @longpress='copyText(info.phone_1)'>{{info.phone_1}}</text><br>
				<text @longpress='copyText(info.phone_2)'>{{info.phone_2}}</text><br>
			</view>
		    <view class="wechat">
				<text @longpress='copyText(info.wechat)'>{{info.wechat || ""}}</text>
			</view>
		    <view class="address">
				<text @longpress='copyText(info.address)'>{{info.address}}</text>
			</view>
		  </view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show_video_box: false,
				videoStyle: "",
				videoBroken: false,
				picture: "https://images.gitee.com/uploads/images/2022/0403/205430_bdf31416_8198507.png",
				info: {
					video: "",
					school_name: '呼市汽车工程职业技术学校',
					phone_1: '电话1: ',
					phone_2: '电话2: ',
					wechat: '微信: ',
					address: 'xxx',
				},
				
				initial_info: {
					video: "",
					school_name: '呼市汽车工程职业技术学校',
					phone_1: '电话1: ',
					phone_2: '电话2: ',
					wechat: '微信: ',
					address: 'v0.0.0',
				},
			}
		},
		methods: {
			showData() {
				console.log(JSON.stringify(this._data));
				console.log(this._data);
			},
			
			copyText(data) {
				if (!data)
					return 0;
				data = String(data);

				// 去掉首位空格, 以及中文冒号替换
				data = data.replace('：', ':')
				var ls = data.split(":");
				if (ls.length > 1)
					data = ls[ls.length - 1].trim()
				
				uni.setClipboardData({
				data: data,
				success() {
					uni.showToast({
						title:'已复制[' + data + ']到剪贴板',
						icon:'none',
						position:'top'
					        })
						}
					})
			},
			async init() {
				console.log('初始化...')
				this.videoBroken = false;
				this.show_video_box = false;		// 默认先图片
				this.info = this.initial_info;
			},
			async load() {
				console.log('加载数据中...')
				const res = await this.api.myRequest({
					method: 'POST',
					url: '/api/myconf/Info/',
					data: {
						'post_type': 'list',
						'order_type_ls': '-id',
					}
				})
				if(res.statusCode !== 200){
					return uni.showToast({
						title: '获取数据失败!',
						icon: 'none'
					})
				}
				this.videoBroken = false;
				var data = res.data.result.data[0]
				console.log("------- data: ", data)
				
				var video_field_type = data.video.substring(data.video.length-3, data.video.length);
				console.log('video_field_type --- ', video_field_type);
				
				if (['png', 'jpg'].indexOf(video_field_type) == -1){
					this.show_video_box = true;
				}
				
				this.info = data
				return 1
			},
			onPullDownRefresh() {
					console.log('下拉刷新了111')
					this.init()
					setTimeout(()=>this.load(), 500)
					uni.stopPullDownRefresh()
			},
			videoErrorCallback(e) {
				// console.log("=== videoErrorCallback: ", e.detail)
				// console.log("=== videoErrorCallback: ", e.mp.warning)
				 console.log(JSON.stringify(e))
				this.videoBroken = true
				
			}
		},
		onLoad() {
			this.init()
			this.load()
		}
	}
</script>

<style>
	#myVideo {
		width: 100%;
	}
	.video_error {
		padding: 20upx;
	}
	
	.error_image {
		width: 100%;
		height: 370upx;
	}
	
	.title {
		height: 30px;
		line-height: 30px;
		color: #000;
		font-size: 40upx;
		font-weight: bold;
		/* text-align: center; */
		/* letter-spacing: 20px; */
		margin: 10rpx 0;
		
		padding-left: 20upx;
		border-left: 6upx solid #2196F3;
		/* background: #eee; */
		background-color: #ddffff;
	}
	
	/* 下方介绍 */
	.container {
	  display: grid;
	  grid-template-columns: 0.6fr 1.4fr;
	  grid-template-rows: 1fr;
	  gap: 0px 10px;
	  grid-auto-flow: row;
	  grid-template-areas:
	    "picture_view text";
	  
	  /* 自定义 */
	  background-color: #eee;
	  padding-left: 30upx;
	  padding-top: 150upx;
	  padding-bottom: 300upx;
	}
	
	.picture_view {
		grid-area: picture_view;
	}
	.picture_content {
		width: 220upx;
		height: 220upx;
	}
	
	.text {  display: grid;
	  grid-template-columns: 1fr;
	  grid-template-rows: 0.4fr 1.6fr 1fr 1fr;
	  gap: 20upx 0upx;
	  grid-auto-flow: row;
	  grid-template-areas:
	    "school_name"
	    "phone_numbers"
	    "wechat"
	    "address";
	  grid-area: text;
	  
	  border-left-width: 4rpx;
	  border-left-style: solid;
	  border-left-color: #e93b3d;
	  padding-left: 10upx;
	}
	
	.school_name { grid-area: school_name; }
	
	.phone_numbers { grid-area: phone_numbers; }
	
	.wechat { grid-area: wechat; }
	
	.address { grid-area: address; }

	
</style>
